<!--
 * @Description: 搜索栏，详情见ui《首页》
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 14:44:34
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-11-21 22:54:03
 * @FilePath: /xp-platform-mobile/sheep/components/f-searchBar/f-searchBar.vue
 * @demoPic: 
-->
<template>
	<view class="content">
		<uni-easyinput
			type="text"
			class="uni-input"
			@focus="focusInput"
			v-model.trim="searchForm.input"
			placeholder="请输入搜索内容"
			:inputBorder="false"
		/>
		<!-- <input class="uni-input" @focus="focusInput" v-model="searchForm.input" placeholder="请输入搜索内容"></input> -->
		<image
			:src="src"
			style="width: 47rpx; height: 40rpx; margin: 0 18rpx"
			mode="aspectFit"
			@tap="chooseImage"
		>
		</image>
		<b-button type="primary" size="small" :style="style" @click="handleBtnClick">
			<view class="text">搜索</view>
		</b-button>
	</view>
</template>
<script>
	import showIndexApi from '../../../sheep/api/showIndex.js';
	import $store from '@/sheep/store';

	export default {
		data() {
			return {
				src: './../../../static/common/camera.png',
				style: {
					borderRadius: '28rpx',
					height: '52rpx',
					lineHeight: 2,
				},
				searchForm: {
					input: '',
				},
				imageSrc: '',
			};
		},
		watch: {
			'searchForm.input': {
				deep: true,
				immediate: true,
				handler(val) {
					this.$emit('changeInput', val);
				},
			},
		},
		methods: {
			// 触发搜索按钮点击事件
			handleBtnClick() {
				console.log('搜索内容======', this.searchForm.input);
				this.$emit('searchClicked', this.searchForm.input);
			},
			focusInput() {
				this.$emit('focusInput', this.searchForm.input);
			},
			/**
			 * 选择图片
			 */
			chooseImage: function () {
				// 试用用户权限控制
				if ($store('user').userInfo.roleType == 21) {
					$store('user').setAuthModal(true);
					return;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0]);
						var imagePath = res.tempFilePaths[0];
						uni.showLoading({
							title: '上传中',
						});
						const file = res.tempFiles; //上传的file
						console.log('file====', file);
						showIndexApi.getImageSearahPicture({ file: file[0] }).then((res) => {
							console.log(res, 'res===');
							uni.hideLoading();
							uni.showToast({
								title: '上传成功',
								icon: 'success',
								duration: 1000,
							});
							this.$emit('searchSuccess', {
								imageSrc: file,
								imagePath,
								resInfoList: res.data,
							});
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err);
					},
				});
			},
			//设置输入框的回显值
			setFormInputText(val) {
				this.searchForm.input = val;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 68rpx;
		border-radius: 36rpx;
		// margin: 32rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 16rpx 8rpx 16rpx 32rpx;
		box-sizing: border-box;
		background: #fff;

		.uni-input {
			flex-grow: 1;
		}

		.text {
			width: 54rpx;
			height: 36rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
		}

		:deep(.uni-button) {
			line-height: 1;
		}

		:deep(.uni-input-placeholder) {
			height: 36rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #acaeaf;
			display: flex;
			align-items: center;
		}

		:deep(.uni-input-input) {
			height: 36rpx;
			font-weight: 400;
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
